<!-- 底部导航组件 -->
<!-- 调用时iphoneBody -->
<template>
	<view class="iphoneBody">
		<slot></slot>
		<view class="tabBox" :style="{zIndex: tabIndex}">
			<view class="item" v-for="(item,index) in tabList" :key="index" @click="selectTab(index)" >
				<view>
					<image class="iconImg" :src="currentText == item.text  ? item.selectedIconPath : item.iconPath"></image>
				</view>
				<text :class="['tabbar_text', currentText ==item.text  ? 'active' : '']">{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			// currentIndex: {
			// 	type: String,
			// 	default(){
			// 	    return 0
			// 	}
			// },
			currentText: {
				type: String,
				default(){
				    return ''
				}
			}
		},
		data(){
			return{
				user_info: {},
				tabList: [],
			}
		},
		computed:{
			tabIndex:{
			    get: function () {
				  return this.$store.state.tabIndex
				},
				set: function () {
				}
			}
		},
		watch: {
			currentText(newVal) {
				this.currentText = newVal
			},
			tabIndex(newVal){
				this.tabIndex=newVal
			},
		},
		mounted(){
			this.user_info = uni.getStorageSync('user_info')
			this.init()
		},
		created() {
			this.tabIndex=this.$store.state.tabIndex
			// console.log(this.$store.state.tabIndex)
		},

		methods:{
			init() {
				if(this.user_info['role'] == '148') {	//销售经理 manager
					this.tabList = [{
						"pagePath": "pages/home/manager/index", 
						"iconPath": require("@/static/images/home_icon.png"),
						"selectedIconPath": require("@/static/images/home_icon_HL.png"),
						"text": "首页"
					}, {
						"pagePath": "pages/reportForm/manager/index",
						"iconPath": require("@/static/images/reportForm_icon.png"),
						"selectedIconPath": require("@/static/images/reportForm_icon_HL.png"),
						"text": "报表"
					}, {
						"pagePath": "pages/clue/manager/clueList/index",
						"iconPath": require("@/static/images/clue_icon.png"),
						"selectedIconPath": require("@/static/images/clue_icon_HL.png"),
						"text": "线索"
					}, {
						"pagePath": "pages/mine/index",
						"iconPath": require("@/static/images/mine_icon.png"),
						"selectedIconPath": require("@/static/images/mine_icon_HL.png"),
						"text": "我的"
					}]
				} else if(this.user_info['role'] == '144') {	//店销售总，店总storeManager
					this.tabList = [{
						"pagePath": "pages/reportForm/storeManager/home/index",
						"iconPath": require("@/static/images/home_icon.png"),
						"selectedIconPath": require("@/static/images/home_icon_HL.png"),
						"text": "首页"
					}, {
						"pagePath": "pages/activity/adviser/activityList/index",
						"iconPath": require("@/static/images/activity_icon.png"),
						"selectedIconPath": require("@/static/images/activity_icon_HL.png"),
						"text": "活动"
					}, {
						"pagePath": "pages/clue/manager/clueList/index",
						"iconPath": require("@/static/images/clue_icon.png"),
						"selectedIconPath": require("@/static/images/clue_icon_HL.png"),
						"text": "线索"
					}, {
						"pagePath": "pages/mine/index",
						"iconPath": require("@/static/images/mine_icon.png"),
						"selectedIconPath": require("@/static/images/mine_icon_HL.png"),
						"text": "我的"
					}]
				} else if(this.user_info['role'] == '143') {	//店总storeManager
					this.tabList = [{
						"pagePath": "pages/reportForm/storeManager/home/index",
						"iconPath": require("@/static/images/home_icon.png"),
						"selectedIconPath": require("@/static/images/home_icon_HL.png"),
						"text": "首页"
					}, {
						"pagePath": "pages/activity/adviser/activityList/index",
						"iconPath": require("@/static/images/activity_icon.png"),
						"selectedIconPath": require("@/static/images/activity_icon_HL.png"),
						"text": "活动"
					}, {
						"pagePath": "pages/mine/index",
						"iconPath": require("@/static/images/mine_icon.png"),
						"selectedIconPath": require("@/static/images/mine_icon_HL.png"),
						"text": "我的"
					}]
				} else if(this.user_info['role'] == '129') {	//集团总
					this.tabList = [{
						"pagePath": "pages/reportForm/region/home/group",
						"iconPath": require("@/static/images/home_icon.png"),
						"selectedIconPath": require("@/static/images/home_icon_HL.png"),
						"text": "首页"
					}, {
						"pagePath": "pages/activity/adviser/activityList/index",
						"iconPath": require("@/static/images/activity_icon.png"),
						"selectedIconPath": require("@/static/images/activity_icon_HL.png"),
						"text": "活动"
					}, {
						"pagePath": "pages/mine/index",
						"iconPath": require("@/static/images/mine_icon.png"),
						"selectedIconPath": require("@/static/images/mine_icon_HL.png"),
						"text": "我的"
					}]
					
				} else if(this.user_info['role'] == '139') {	//大区总，品牌总 region
					this.tabList = [{
						"pagePath": "pages/reportForm/region/home/index",
						"iconPath": require("@/static/images/home_icon.png"),
						"selectedIconPath": require("@/static/images/home_icon_HL.png"),
						"text": "首页"
					}, {
						"pagePath": "pages/activity/adviser/activityList/index",
						"iconPath": require("@/static/images/activity_icon.png"),
						"selectedIconPath": require("@/static/images/activity_icon_HL.png"),
						"text": "活动"
					}, {
						"pagePath": "pages/mine/index",
						"iconPath": require("@/static/images/mine_icon.png"),
						"selectedIconPath": require("@/static/images/mine_icon_HL.png"),
						"text": "我的"
					}]
				} else if(this.user_info['role'] == '155') {
					this.tabList = [{
						"pagePath": "pages/activity/adviser/activityList/index",
						"iconPath": require("@/static/images/activity_icon.png"),
						"selectedIconPath": require("@/static/images/activity_icon_HL.png"),
						"text": "活动"
					}, {
						"pagePath": "pages/mine/index",
						"iconPath": require("@/static/images/mine_icon.png"),
						"selectedIconPath": require("@/static/images/mine_icon_HL.png"),
						"text": "我的"
					}]
					if (this.user_info.userDeptId == this.user_info.deptId && this.user_info.deptLevel == '30') {
						this.tabList.unshift({
							"pagePath": "pages/reportForm/region/home/group",
							"iconPath": require("@/static/images/home_icon.png"),
							"selectedIconPath": require("@/static/images/home_icon_HL.png"),
							"text": "首页"
						})
					} else {
						this.tabList.unshift({
							"pagePath": "pages/reportForm/region/home/index",
							"iconPath": require("@/static/images/home_icon.png"),
							"selectedIconPath": require("@/static/images/home_icon_HL.png"),
							"text": "首页"
						})
					}
				} else {	//销售顾问 adviser if(this.user_info['role'] == '150')
					this.tabList = [{
						"pagePath": "pages/home/adviser/index",
						"iconPath": require("@/static/images/home_icon.png"),
						"selectedIconPath": require("@/static/images/home_icon_HL.png"),
						"text": "首页"
					}, {
						"pagePath": "pages/activity/adviser/activityList/index",
						"iconPath": require("@/static/images/activity_icon.png"),
						"selectedIconPath": require("@/static/images/activity_icon_HL.png"),
						"text": "活动"
					}, {
						"pagePath": "pages/clue/adviser/clueList/index",
						"iconPath": require("@/static/images/clue_icon.png"),
						"selectedIconPath": require("@/static/images/clue_icon_HL.png"),
						"text": "线索"
					}, {
						"pagePath": "pages/mine/index",
						"iconPath": require("@/static/images/mine_icon.png"),
						"selectedIconPath": require("@/static/images/mine_icon_HL.png"),
						"text": "我的"
					}]
				}
			},
			selectTab(index){
				if(!this.tabList[index].pagePath) return false;
				
				uni.reLaunch({
					url: `/${this.tabList[index].pagePath}`
				});
			}
		}
	}
</script>

<style>
	.iphoneBody {
		padding-bottom: 132rpx;
		padding-bottom: calc(132rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(132rpx + env(safe-area-inset-bottom));
		box-sizing: content-box;
	}
	.tabBox{
		width: 100%;
		height:132rpx;
		display: flex;
		display: inline-flex;
		display: -webkit- flex;
		align-items:center;
		justify-content: center;
		background: #FFFFFF;
		box-shadow: 0 -4px 8px rgba(116, 169, 255, 0.15);
		position: fixed;
		left:0;
		bottom:0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); 
		box-sizing: content-box; 
	}
	.tabBox>.item{
		flex: 1;
		text-align: center;
	}
	.tabBox>.item .iconImg{
		width:40rpx;
		height:40rpx;
		margin-bottom:14rpx;
		padding:0;
	}
	.tabBox>.item .tabbar_text{
		font-size:24rpx;
		color: #43425D;
		opacity: 0.7;
	}
	.tabBox>.item .active{
		color: #333333;
		opacity: 1;
	}
</style>
